<template>
  <div>
    <el-input :disabled='disabled' :placeholder="placeholder" v-model.trim="hideValue" @blur="handleBlur" @focus="handleFocus" @input="handleInput"></el-input>
  </div>
</template>

<script>
export default {
  name: 'AccDesensitization',
  props: {
    value: {
      type: String || Number,
      default: '',
      require: true
    },
    isdesensitization: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    ruleType: {
      type: String,
      default: 'idCarDesensitization'
    }
  },
  data () {
    return {
      isShow: true,
      hideValue: '',
      oldValue: '',
      placeholder: ''
    }
  },
  created () {
    if ((this.value !== '' || this.value !== null) && this.isdesensitization) this.hideValue = this.$options.filters[this.ruleType](this.value)
    else this.hideValue = this.value
  },
  methods: {
    init (val) {
      if ((val !== '' || val !== null) && this.isdesensitization) this.hideValue = this.$options.filters[this.ruleType](val)
      else this.hideValue = this.value
    },
    handleInput (val) {
      this.$emit('input', val)
    },
    doShow () {
      this.hideValue = this.hideValue.indexOf('**') > -1 ? this.value : this.$options.filters[this.ruleType](this.value)
    },
    handleFocus (e) {
      this.$emit('focus', e)
      this.placeholder = this.hideValue
      if (this.hideValue.indexOf('**') === -1) return
      this.oldValue = this.value
      this.hideValue = ''
    },
    handleBlur (e) {
      if (this.value === this.oldValue && this.placeholder.indexOf('**') > -1) {
        this.hideValue = this.placeholder
      }
      this.$emit('blur', e)
    }
  }
}
</script>

<style>

</style>
